<template>
<div class="test">
<!--  <button @click="ppp()">aaa</button>-->
<!--  <div>{{info.data}}</div>-->

  <div>
    <el-table
        ref="multipleTable"
        :data="info.data"
        tooltip-effect="dark"
        style="width: 100%"
        max-height="850"
        stripe
        border
    >
      <el-table-column type="expand">
        <template #default="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.good_name }}</span>
            </el-form-item>
            <el-form-item label="图片1" >
              <span><img :src="props.row.picture3"></span>
            </el-form-item>
            <el-form-item label="图片2" >
              <span><img :src="props.row.picture3"></span>
            </el-form-item>
            <el-form-item label="图片3" >
              <span><img :src="props.row.picture3"></span>
            </el-form-item>
            <el-form-item label="图片4" >
              <span><img :src="props.row.picture4"></span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          prop="good_id"
          label="ID"
          width="75">
      </el-table-column>
      <el-table-column
          prop="good_name"
          label="姓名"
          width="160">
      </el-table-column>
      <el-table-column
          prop="inventory"
          label="库存"
          width="120">
      </el-table-column>
      <el-table-column
          prop="sort"
          label="种类"
          width="120">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格"
          width="120">
      </el-table-column>
      <el-table-column
          prop="inventory"
          label="地址"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="300">
      <template #default="scope">
        <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">确认上架</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index)">取消上架</el-button>
      </template>
      </el-table-column>
    </el-table>
  </div>
</div>
</template>

<script>
import axios from "axios";

export default {
  data() {

    return {
      info: 'Ajax 测试!!',

    }
  },
  created(){
    this.getanswer();
    // let urltest = this.$data.info.data.picture1;


  },
  methods: {

    //传值的函数
    getanswer() {
      axios
          .get('api/SmartHire_war/AuditServlet',
      {
        params:{
          status:'onload',
        }
      })
          .then(response => {
            console.log(response);
            this.info = response;

          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });

    },
    //返回不上架的
    returnbackfail(goodid){
      axios
      .get('api/SmartHire_war/AuditServlet',
                {
                  params:{
                    good_id:goodid,
                    status:'fail',
                  }
                }
            )
      .then(response=>{
        console.log(response);
      })
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
    //返回上架的
    returnbacksuc(goodid){
      axios
          .get('api/SmartHire_war/AuditServlet',
              {
                params:{
                  good_id:goodid,
                  status:'suc',
                }
              }
          )
          .then(response=>{
            console.log(response);
            console.log("sucsucsucsuc")
          })
          .catch(function (error) { // 请求失败处理
            console.log(error);
          });
    },
    //右侧弹出的提醒
    opensuccess() {
      this.$notify({
        title: '成功',
        message: '这件商品成功上架',
        type: 'success',
        duration:1500,
      });
    },
    opendel() {
      this.$notify({
        title: '提醒',
        message: '这件商品已取消上架',
        type: 'warning',
        duration:1500,
      });
    },

    //两个按钮的函数
    handleEdit(index, row) {
      console.log(index, row);
      this.opensuccess();
      this.returnbacksuc(this.info.data[index].good_id);
      this.info.data.splice(index, 1);
    },
    handleDelete(index) {
      console.log(this.info.data[index].good_id);
      this.opendel(this.info.data[index].id);
      this.returnbackfail(this.info.data[index].good_id);
      this.info.data.splice(index, 1);
    }
  }
}
</script>

<style scoped>
img{
  width: 100px;
  height: 100px;
}
</style>